<template>
    <div class="page-home">
      <PanelHead :title="panelTitle" :description="panelDescription"/>
      <el-table :data="tableData.list" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />

        <el-table-column prop="id" label="id"  width="90" />
        <el-table-column prop="code" label="订单编号"  />
        <el-table-column prop="hospitalName" label="医院名称"  />
        <el-table-column prop="stuffName" label="陪护师"  />
        <el-table-column prop="startTime" label="开始时间"  />

        <el-table-column label="创建时间"  >
          <template #default="scope">
            <div class="flex-box">
              <el-icon><Clock /></el-icon>
              <span style="margin-left: 10px"> {{ scope.row.createTime }} </span>
            </div>

          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" >
          <template #default="scope">
            <el-button type="primary" @click="open(scope.row)">编辑</el-button>
          </template>
        </el-table-column>


      </el-table>
      <div class="pagination-info">
        <el-pagination
            v-model:current-page="paginationData.pageNum"
            :page-size="paginationData.pageSize"
            size="small"
            :background="false"
            layout="total, prev, pager, next"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >

        </el-pagination>
      </div>

    </div>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {orderList} from "../../../api/modules/orderApi.js";

onMounted(()=> {

  // 发送请求，获得表格数据
  getTableData();

})

// 分页定义
const paginationData = reactive({
  pageNum: 1,
  pageSize: 10
});
// 列表数据
const tableData = reactive({
  list:  [
  ],
  total: 1
});
// 请求列表数据
const getTableData = () => {

  orderList(paginationData).then(({ data }) => {
    const { list, total } = data.data;

    console.log(data.data);

    tableData.list = list;
    tableData.total = total;
  });

};

// 选中的id
const selectTableData = ref([]);
const handleSelectionChange = (val) => {
  console.log("change!",val);
  // selectTableData.value = val;
  selectTableData.value = val.map(item => item.id);
};

// 页面数据变更
const handleSizeChange = (val) => {
  //console.log('数据变更');
  paginationData.pageNum = val;
  getTableData();
};

// 当前页码改变
const handleCurrentChange = (val) => {
  //console.log('页面变更');
  paginationData.pageNum = val;
  getTableData();
};


const panelTitle = ref('订单管理');
const panelDescription = ref('查看和管理用户订单');
</script>
